<template>
  <a-form-model :model="form" ref="ruleForm" :rules="rules" :label-col="{ span: 5 }" :wrapper-col="{ span: 17 }" >
    <a-form-model-item label="对象" prop="personName">
      <a-input :disabled="true" v-model="form.personName" placeholder="请输入" />
    </a-form-model-item>
    <a-form-model-item label="身份证" prop="identityCard">
      <a-input :disabled="true" v-model="form.identityCard" placeholder="请输入" />
    </a-form-model-item>
    <a-form-model-item label="请假开始时间" prop="startTime">
      <a-date-picker :disabled="!footerBool" valueFormat="YYYY-MM-DD" v-model="form.startTime" type="date" placeholder="请选择" style="width: 100%;" />
    </a-form-model-item>
    <a-form-model-item label="请假结束时间" prop="endTime">
      <a-date-picker :disabled="!footerBool" valueFormat="YYYY-MM-DD" v-model="form.endTime" type="date" placeholder="请选择" style="width: 100%;" />
    </a-form-model-item>
    <a-form-model-item label="请假天数" prop="leaveDay">
      <a-input :disabled="!footerBool" type="number" v-model="form.leaveDay" placeholder="请输入" />
    </a-form-model-item>
    <a-form-model-item label="请假事由" prop="reason">
      <a-textarea :disabled="!footerBool" v-model="form.reason" placeholder="请输入" :auto-size="{ minRows: 2, maxRows: 6 }" />
    </a-form-model-item>
    <a-form-model-item label="外出地点" prop="province">
      <a-cascader
        :disabled="!footerBool"
        :options="regionOptions"
        :showSearch="{ filter }"
        placeholder="选择省市县"
        AUTOCOMPLETE="off"
        v-model="form.province"
        @change="onChange"
      />
    </a-form-model-item>
    <a-form-model-item label="附件上传" prop="file">
      <UploadAvatar ref="uploadAvatar" :avatarType="1" :imgURL="form.file" :disabled="!footerBool" @getAvatar="getAvatar"  />
    </a-form-model-item>
    <a-form-model-item label="抄送人" prop="userList" ref="userList">
      <ScopeApplication ref="SelectIndex" :checkedDataType="[1]" :disabled="!footerBool" :isModal="true" @getRangeInfo="getRangeInfo" />
    </a-form-model-item>
  </a-form-model>
</template>

<script>
  import { mapState } from 'vuex'
  import UploadAvatar from '@/components/base/upload/UploadAvatar'
  import ScopeApplication from "@/components/business/ScopeApplication"
  import { regionData } from 'element-china-area-data'
  import {leaveApplyDetail} from "@/api/personnelFiles"
  export default {
    props: ['formData','footerBool','applyKey'],
    components: {
      UploadAvatar, ScopeApplication
    },
    data() {
      return {
        form: {},
        regionOptions: regionData,
        rules: {
          personName: [
            { required: true, message: "请输入", trigger: "change" },
          ],
          identityCard: [
            { required: true, message: "请输入", trigger: "change" },
          ],
          startTime: [
            { required: true, message: "请选择", trigger: "change" },
          ],
          endTime: [
            { required: true, message: "请选择", trigger: "change" },
          ],
          leaveDay: [
            { required: true, message: "请输入", trigger: "change" },
          ],
          reason: [
            { required: true, message: "请输入", trigger: "change" },
          ],
          province: [
            { required: true, message: "请选择", trigger: "change" },
          ],
          file: [
            { required: true, message: "请上传附件", trigger: "change" },
          ],
        },
      }
    },
    watch: {
      formData: {
        immediate: true,
        handler(val) {
          this.form = Object.assign({}, val)
        },
      },
      applyKey: {
        immediate: true,
        handler(val) {
          console.log(val)
          if(val) this.geLeaveApplyDetail(val)
        },
      }
    },
    methods: {
      // 获取外出请假详情
      async geLeaveApplyDetail(id) {
        let res = await leaveApplyDetail(id)
        if(res.status==200)  {
          let data = res.data
          data.file = data.fileId
          this.form = Object.assign({...this.form, ...data})
        }
      },
      // 获取适用范围值
      getRangeInfo(data) {
        this.form.userList = data
      },
      // 获取头像值
      getAvatar(data) {
        if(data.length>0) {
          this.form.file = data.map((obj,index)=>{
            return obj.data;
          }).join(',')
        }
      },
      filter(inputValue, path) {
        return path.some(option => option.label.toLowerCase().indexOf(inputValue.toLowerCase()) > -1)
      },
      onChange(value, arr) {
        let name = arr.map(v=>v.label).join()
        this.form.provinceCityAreaCode = value.toString()
        this.form.provinceCityAreaName = name
      },
    },
  }
</script>

<style lang="less">
</style>
